<template>
	<view>
		<view class="connectList" :style="{width:width}">
			<view class="list-card" :style="{height:height}" v-for="(item,index) in data">
				<!-- 头像信息 -->
				<view class="user-info">
					<view class="top-img">
						<image :src="item.logo" mode=""></image>
					</view>
						<!-- 内容 -->
							<view class="top-conten">
								<view class="top-card">
									<view class="title">
										{{item.uname}}
									</view>
									<!-- 人数 -->
									<view class="map bgTheme" @click="submit(index)">
										联系TA
									</view>
								</view>
								<!-- 介绍 -->
								<view class="include">
									<text>{{item.tag}}</text>
									<!-- <text class="jg">|</text>
									<text>70后</text>
									<text class="jg">|</text>
									<text>创业者</text> -->
								</view>
							</view>
						</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"connectOrder",
		props:{
			userInfo: {
				type: Array,
				default: () => []
			},
			height:{
				type: String,
				default: "160rpx"
			},
			width:{
				type: String,
				default: "94.5%"
			},
			data:{
				type: Array,
				default: () => []
			},
			params:{}
		},
		data() {
			return {
				
			};
		},
		methods:{
			submit(index){
				// console.log(this.userInfo[index])/
				this.$emit("submits",this.userInfo[index])
			}
		}
	}
</script>

<style lang="less">
	.connectList{
		margin: 0 auto;
	}
.list-card{
		position: relative;
		width: 100%;
		// height: 160rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		margin: 3% 0;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0 0 4rpx 1rpx #eaeaea;
	}
	.user-info{
		width: 100%%;
		height: 150rpx;
		padding: 15rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.top-img{
			background-color: #007AFF;
			height: 110rpx;
			width: 17%;
			border-radius: 100%;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.top-conten{
			width: 79%;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-card{
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 35rpx;
					font-weight: 600;
				}
			}
			.include{
				text{
					// margin-right: 2%;
					font-size: 24rpx;
					color: #4c4c4d;
				}
				.jg{
					margin: 0 1.5%;
				}
				.more{
					color: #994275;
				}
				
			}
			.map{
				width: 180rpx;
				height: 48rpx;
				font-size: 25rpx;
				border-radius: 60rpx;
				// background-color: #994275;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}
		.address{
			display: none;
		}
	}
</style>
